<template>
	<uni-nav-bar title="开启班次" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale">开工期间车长要对车辆的违章行为和事故承担相应责任，故车长拥有40%收益调节权</view>
	<view class="package_sale">
		<view class="space-between">
			<view>加注机</view>
			<hpy-form-select :dataList="fillList" text="fill_name" name="value" @change="consoluFill" :Text="fillName"
				:icon="true" />
		</view>
		<view class="space-between top">
			<view>班次人数</view>
			<uni-data-checkbox v-model="sex" :localdata="sexs" @change="validate" />
		</view>
		<view class="space-between top" v-if="sex===1">
			<view>同班人员</view>
			<hpy-form-select :dataList="frinedList" text="name" name="value" @change="consoluFrined" :Text="frinedName"
				:icon="true" />
		</view>
		<view class="top">
			<view>拍照</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" :sourceType="sourceType"/>
		</view>
		<view class="top">
			<view>备注</view>
			<textarea class="textarea" v-model="value"></textarea>
		</view>
		<view class="but" @click="submit">确定开启</view>
	</view>
	<Watermark ref="watermark" @selected="selected"></Watermark>
</template>

<script setup lang="ts">
	import { navBack, redirectTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import Watermark from '@c/watermark.vue';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import { getDeliveryDriverList } from '@/gql/administrator';
	import { toPublish } from '@mqtt';
	import { useUserInformation } from '@/stores/earthPushing/userSale';
	import { getFillList } from '@/gql/earthPushing/user';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const userInfo = useUserInformation();
	const fillList = ref([]); // 加注列表
	const fillName = ref('请选择加注机'); //加注名称
	const fillId = ref();//加注ID
	const frinedList = ref([])//同行人列表
	const frinedName = ref('请选择同行人'); //同行人名称
	const frinedId = ref();//同行人ID
	const value = ref('');
	const sourceType = ["camera"]

	// 单选数据源
	const sex = ref(0)
	const sexs = [{
		text: '1',
		value: 0
	}, {
		text: '2',
		value: 1
	}]
	// 上传图片
	const imgList = ref([])
	const image = ref()
	const watermark = ref(null)
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value = JSON.parse(uploadFileRes.data).data.url
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
		image.value = ''
	}
	// 获取加注机列表
	fillLists()
	function fillLists() {
		showLoading()
		const payload = {
			query: getFillList,
			variables: {
				delivery_id: userInfo.delevery_id,
			},
		};
		toPublish('ql/staff/getFillList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getFillList } = obj.data;
				fillList.value = getFillList
			},
		);
	}
	//同行人列表
	init()
	function init() {
		showLoading()
		const payload = {
			query: getDeliveryDriverList,
			variables: {
				delivery_id: userInfo.delevery_id
			},
		};
		toPublish(
			'ql/control/getDeliveryDriverList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getDeliveryDriverList } = obj.data;
				frinedList.value = getDeliveryDriverList
			}
		);
	}
	function validate(e : any) {
		console.log(JSON.stringify(e))
		sex.value = e.detail.value
	}
	//切换加注机列表
	function consoluFill(e : any) {
		fillName.value = e.data.fill_name;
		fillId.value = e.data.fill_id;
	}
	//选择同行人
	function consoluFrined(e : any) {
		frinedName.value = e.data.name;
		frinedId.value = e.data.driver_id;
	}
	// 确认开启
	function submit() {
		if (!fillId.value) {
			errorToast('请选择加注机')
			return
		}
		if (sex.value == 1 && !frinedId.value) {
			errorToast('请选择同行人')
			return
		}
		if (!image.value) {
			errorToast('请上传图片')
			return
		}
		showLoading()
		const payload = {
			staff_id: staff_id,
			fill_id: fillId.value,
			nums: sex.value == 0 ? 1 : 2,
			huoban_id: sex.value == 0 ? 0 : frinedId.value,
			image: image.value,
			remarks: value.value
		};
		toPublish('staff/addStaffBan',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg, data } = obj;
				if (code === 1) {
					successToast(msg)
					setTimeout(() => {
						userInfo.getUserInfo();
						redirectTo('Sale/checkWork/working?banId=' + data.ban_id)
					}, 1000)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	.textarea {
		background-color: #eee;
		border-radius: 5px;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}
</style>
<style>
	.top>>>.checklist-box {
		margin-right: 0px;
	}

	.top>>>.uni-data-checklist {
		flex: none;
	}

	.space-between>>>.select-picker {
		justify-content: flex-end;
	}

	.top>>>.mk-upload {
		padding: 0px;
	}

	.top>>>.textarea {
		width: 100%;
	}
</style>